<template>
  <div class="refund-reject-dialog">
    <el-badge :hidden="totalNum == 0" :value="totalNum" class="badge">
      <el-button type="primary" size="small" @click="openDialog">异常提醒</el-button>
    </el-badge>

    <abnormalWorkOrderDialog ref="abnormalWorkOrderDialog" @customHandle="onCustomHandle"></abnormalWorkOrderDialog>
  </div>
</template>

<script>
import abnormalWorkOrderDialog from './abnormalWorkOrderDialog'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters(['permission', 'totalNum']),
  },
  methods: {
    show() {
      this.$refs.abnormalWorkOrderDialog.show()
    },
    openDialog() {
      this.getTotalRecord().then(() => {
        this.show()
      })
    },
    setTimer() {
      if (this.timer) {
        return
      }
      this.timer = setInterval(() => {
        this.getTotalRecord()
      }, 60 * 1000)
    },
    getTotalRecord() {
      return this.$store.dispatch('getNum').then(res => {
        if (res.abnormalNum > 0 || res.updateGoodNotPassNum > 0) {
          this.show()
        }
      })
    },
    clearTimer() {
      this.timer && clearInterval(this.timer)
      this.timer = null
    },
    onCustomHandle() {
      this.getTotalRecord()
    }
  },
  activated() {
    this.getTotalRecord()
    this.setTimer()
  },
  deactivated() {
    this.clearTimer()
  },
  components: {
    abnormalWorkOrderDialog
  }
};
</script>
<style lang="scss" scoped></style>